<template>
	<view style="position: relative;height: 100%;font-size: 15px;"  v-if="orderinfo">
		<view class="addresstop" @click="gotoLogisticsBtn(orderinfo.id)"  v-if="orderinfo.orderStatus==4||orderinfo.orderStatus==3">
			<uni-icons type="shop" color="coral" size="22"></uni-icons>
			<text style="color:coral" v-if="orderinfo.orderStatus==4">已签收</text>
			<text style="color:coral" v-if="orderinfo.orderStatus==3">待收货</text>
			<text style="color: lightgray;"> | </text>
			<text>{{orderinfo.receiptName}}</text>
			<text>{{orderinfo.receiptPhone}}</text>
			<text class="address-text">送至 {{orderinfo.receiptDetailAddress}}</text>
			<uni-icons type="right" color="lightgray"></uni-icons>
		</view>
		<view v-if="(orderinfo.orderStatus==0 || orderinfo.orderStatus==1|| orderinfo.orderStatus==2) && orderaddress" style="display: flex;justify-content: space-between;
		padding: 5px;align-items: flex-start;">
			<view  style="display: flex;">
				<uni-icons type="location" size="20"></uni-icons>
				<view  style="display: flex;flex-direction: column;">
					<view>
						{{orderaddress.address}}{{orderaddress.detailAddress}}
					</view>
					<view style="display: flex;flex-direction: row;">
						<uv-text  size="14" :text="orderaddress.name"></uv-text>
						<uv-text  size="14" mode="phone" format="encrypt" :text="orderaddress.phone"></uv-text>
						<uv-button size="mini">号码保护中</uv-button>
					</view>
				</view>
				
			</view>
			<view  style="display: flex;align-items: center;" @click="goToReceivingAddress">
				<uv-text color="coral" text="修改" size="14"></uv-text>
				<uni-icons type="right" color="lightgray"></uni-icons>
			</view>
		</view>
		<view class="order">
			<view class="shop" @click="goShop(orderinfo.shopId)">
				<view class="shopname">
					<text>{{orderinfo.shopName}}</text>
					<uni-icons type="right" size="20" color="gray"></uni-icons>
				</view>
				<text class="status" v-if="orderinfo.orderStatus == 4">交易成功</text>
			</view>
			<view v-if="orderinfo.carts"  v-for="(item,index) in orderinfo.carts">
				<view class="ordertail"  @click.stop="gotoGoodInfo(item.goodsId)">
					<image :src="item.mainImage"  mode="aspectFill"  style="border-radius: 5px;width: 50%;height: 100px;"></image>
					<view>
						<view class="goodname">{{item.goodsName}}</view>
						<view  style="padding: 0;margin: 0;" v-if="item.productSpecificationsDesc" v-for="(spec,indexspec) in item.productSpecificationsDesc">{{spec}}</view>
						<view class="remark" v-if="false">
							<text>退货包运费</text>
							<text>假一赔四</text>
						</view>
					</view>
					<view class="price2">
						<el-text style="color: black;">¥ {{item.unitPrice}}</el-text>
						<el-text>x {{item.quantity}}</el-text>
					</view>
				</view>
				<view class="btn">
					<button size="mini"  style="color: coral;width: auto;margin-right: 10px;"  @click="chartBtn('cart',item)">加入购物车</button>
				</view>
			</view>
			<view v-else>
				<view class="ordertail"  @click.stop="gotoGoodInfo(orderinfo.goodsId)">
					<image  :src="orderinfo.mainImage"  mode="aspectFill"  style="border-radius: 5px;width: 50%;height: 100px;"></image>
					<view>
						<view class="goodname">{{orderinfo.goodsName}}</view>
						<view  style="padding: 0;margin: 0;"  v-if="orderinfo.productSpecificationsList"  v-for="(spec,indexspec) in orderinfo.productSpecificationsList">{{spec}}</view>
						<view class="remark" v-if="false">
							<text>退货包运费</text>
							<text>假一赔四</text>
						</view>
					</view>
					<view class="price2">
						<el-text style="color: black;">¥ {{orderinfo.placeOrderUnitPrice}}</el-text>
						<el-text>x {{orderinfo.placeOrderQuantity}}</el-text>
					</view>
				</view>
				<view class="btn">
					<button size="mini"  style="color: coral;width: auto;margin-right: 10px;"  @click="chartBtn('order',orderinfo)">加入购物车</button>
				</view>
			</view>
			<view>
				<view class="infotitle">
					<text>合计</text>
					<text>{{orderinfo.realTotalMoney}}</text>
				</view>
				<view  class="infotitle">
					<text>订单编号</text>
					<text class="intocontent">{{orderinfo.orderNo}}</text>
				</view>
				<view  class="infotitle">
					<text style="width:30%">收货信息</text>
					<text class="intocontent"><text>{{orderaddress.name}}</text>，<text>{{orderaddress.phone}}</text>，<text>{{orderaddress.address}}{{orderaddress.detailAddress}}</text></text>
				</view>
				<view  class="infotitle">
					<text>交易号</text>
					<text class="intocontent">{{orderinfo.transactionNumber}}</text>
				</view>
				<view  class="infotitle">
					<text>创建时间</text>
					<text class="intocontent">{{formatTimestamp(orderinfo.createTime)}}</text>
				</view>
				<view  class="infotitle">
					<text>付款时间</text>
					<text class="intocontent">{{formatTimestamp(orderinfo.successTime)}}</text>
				</view>
				<view  class="infotitle">
					<text>发货时间</text>
					<text class="intocontent">2025-12-12 00:00:00</text>
				</view>
				<view  class="infotitle">
					<text>成交时间</text>
					<text class="intocontent">2025-12-12 00:00:00</text>
				</view>
			</view>
		</view>
		<view class="bottom-detail"  v-if="orderinfo.orderStatus==4">
			<view style="width: 30%;display: flex;flex-direction: row;justify-content: space-evenly;font-size: 12px;">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;" @click="chatBtn(orderinfo.id,orderinfo.shopId)">
					<uni-icons size="20" type="chat"></uni-icons>
					<text>客服</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;" @click="morenBtn">
					<uni-icons  size="20"  type="more"></uni-icons>
					<text>更多</text>
				</view>
			</view>
			<view style="width:70%;justify-content: space-evenly;display: flex;">
				<button  size="mini" @click="commentBtn(orderinfo)" style="padding-left: 6px;padding-right: 6px;">评价</button>
				<button  size="mini" @click="chartBtn('all',orderinfo)" style="padding-left: 6px;padding-right: 6px;">加入购物车</button>
				<button  size="mini" @click="goGoodDetail(orderinfo)" style="padding-left: 6px;padding-right: 6px;">再买一单</button>
			</view>
		</view>
		<view v-if="orderinfo.orderStatus==0"  class="bottom-detail" >
			<view style="width: 30%;display: flex;flex-direction: row;justify-content: space-evenly;font-size: 12px;">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;" @click="chatBtn(orderinfo.id,orderinfo.shopId)">
					<uni-icons size="20" type="chat"></uni-icons>
					<text>客服</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;" @click="cancelBtn">
					<uni-icons  size="20"  type="closeempty"></uni-icons>
					<text>取消</text>
				</view>
			</view>
			<view style="width:70%;justify-content: flex-end;display: flex;">
				<view style="display: flex;width: 60%;justify-content: flex-end;">
					<uv-text :text="'共1件'"></uv-text>
					<uv-text text="合计:" style="font-weight: bold;" color="black"></uv-text>
					<uv-text :text="orderinfo.realTotalMoney" style="font-weight: bold;" color="coral"></uv-text>
				</view>
				<button  size="mini" @click="commentBtn(orderinfo)" style="padding-left: 6px;padding-right: 6px;background-color: coral;color: white;display: flex;flex-direction: column;font-size: 10px;align-items: center;">
					<text style="font-weight: 600;padding: 0px;font-size: 12px;height: 14px;">继续付款</text>
					<text style="font-weight: 400;padding: 0px;">剩余23:03:12</text>
				</button>
			</view>
		</view>
		<view v-if="orderinfo.orderStatus==6"  class="bottom-detail" >
			<view style="width:100%;text-align: right;">
				<button  size="mini" @click="deleteBtn(orderinfo)" style="padding-left: 6px;padding-right: 6px;margin-right: 10px;">删除订单</button>
				<button  size="mini" @click="chartBtn('all',orderinfo)" style="padding-left: 6px;padding-right: 6px;margin-right: 10px;">加入购物车</button>
				<button  size="mini" @click="goGoodDetail(orderinfo)" style="padding-left: 6px;padding-right: 6px;margin-right: 10px;">再买一单</button>
			</view>
		</view>
		<view class="bottom-detail" v-if="orderinfo.orderStatus==3">
			<view style="width:100%;text-align: right;">
				<button size="mini"  @click.stop="lookLogistics(orderinfo)"  style="padding-left: 6px;padding-right: 6px;margin-right: 10px;">查看物流</button>
				<button size="mini" @click.stop="shouhuoBtn(orderinfo)" style="padding-left: 6px;padding-right: 6px;color: coral;background-color: #ffedd2;margin-right: 10px;">确认收货</button>
			</view>
		</view>
		<uv-modal ref="modalshouhuo" title="'确认收货'" content='是否确认收货?' @confirm="confirmShouHuo"></uv-modal>
		<uv-popup closeable="true" ref="popup" @change="change" mode="bottom" custom-style="border-top-left-radius: 5px;border-top-right-radius: 5px;">
			<view style="overflow:auto;height:80vh;position: relative;">
				<view  class="commentcontent">
					<view v-for="(order,index) in orders" :key="index">
							<view class="xingxing">
								<view  class="comment-icon">
									<view style="display: flex;
					align-items: center;">
										<text style="margin-right: 5px;">描述相符</text>
										<uv-rate size="20" @change="changeDesc(order.goodsId,$event)"   gutter="15"  count="5" :value="0" activeColor="orange"></uv-rate>
									</view>
									<view  v-for="comment in commentList" v-if="commentList.length > 0 && hasProperty(commentList, 'orderId',order.id)">
										<text v-if="comment.descScore === 1">很差</text>
										<text v-if="comment.descScore === 2">一般</text>
										<text v-if="comment.descScore === 3">普通</text>
										<text v-if="comment.descScore === 4">很好</text>
										<text v-if="comment.descScore === 5">非常好</text>
									</view>
								</view>
								<view  class="comment-icon">
									<view style="display: flex;
					align-items: center;">
										<text style="margin-right: 5px;">服务态度</text>
										<uv-rate size="20" @change="changeService(order.goodsId,$event)"  gutter="15" count="5" :value="0" activeColor="orange"></uv-rate>
									</view>
									<view  v-for="comment in commentList" v-if="commentList.length > 0 && hasProperty(commentList, 'orderId',order.id)">
										<text v-if="comment.serviceScore === 1">很差</text>
										<text v-if="comment.serviceScore === 2">一般</text>
										<text v-if="comment.serviceScore === 3">普通</text>
										<text v-if="comment.serviceScore === 4">很好</text>
										<text v-if="comment.serviceScore === 5">非常好</text>
									</view>
								</view>
							</view>
							<view  @click.stop="clickImg(order.mainImage)" style="display: flex;flex-direction: row;
							padding: 10px;background-color: gainsboro;border-top: 1px solid lightgray;
							justify-content: center;
							">
								<image :src="order.mainImage" style="border-radius: 5px;width: 20px;height: 20px;margin-right: 5px;"></image>
								<view style="color: black;">{{order.goodsName}}</view>
							</view>
							<view class="inputcomment">
								<uv-textarea @input="changeInput($event,order.goodsId)" border="none" placeholder="请输入内容" height="100"></uv-textarea>
								<view v-for="comment in commentList" v-if="commentList.length > 0 && hasProperty(commentList, 'goodsId',order.goodsId)">
									<uv-upload v-if="comment.goodsId === order.goodsId"  :fileList="comment.fileList" name="3" multiple :maxCount="10" :previewFullImage="true"
									useBeforeRead="true"
									@afterRead="afterRead($event,order.goodsId)" 
											@delete="deletePic($event,order.goodsId)" customStyle="padding-left:5px;"></uv-upload>
								</view>
								<uv-upload v-else  :fileList="fileList2" name="3" multiple :maxCount="10" :previewFullImage="true"
								useBeforeRead="true"
								@afterRead="afterRead($event,order.goodsId)" 
										@delete="deletePic($event,order.goodsId)" customStyle="padding-left:5px;"></uv-upload>
							</view>
						</view>
				</view>
				<view class="publish" style="position: absolute;bottom:0;width: 100%;">
					<uv-button text="发布" type="warning" @click="commentSubmit"></uv-button>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popup2">
			<view>
				<uv-list>
				    <uv-list-item :clickable="true" @click="operBtn(item)"  v-for="(item,index) in menus"  border="true" direction="column" customStyle="color:gray;text-align:center;padding-top:10px;padding-bottom:10px;">
						{{item.text}}
					</uv-list-item>
				</uv-list>
			</view>
		</uv-popup>
		<uv-modal ref="modal" title="删除订单" content='是否删除该订单?' @confirm="confirm" show-cancel-button="true"></uv-modal>
		<uv-modal ref="modalcancel" title="取消订单" content='是否取消订单' :asyncClose="true" @confirm="confirmCancel"  show-cancel-button="true"></uv-modal>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import {info,closeOrder,removeOrder,editOrder} from '@/api/order.ts'
import { ref } from 'vue'
import {formatTimestamp} from '@/utils/date.ts'
import {baseUrl} from '@/api/request.ts'
import {saveComment} from '@/api/ordercomment.ts'
import {save} from '@/api/shoppingcart.ts'
import {infoReceive} from '@/api/receiveaddress.ts'
const lookLogistics=(item)=>{
		uni.navigateTo({
			url:'/pages/order/logistics?id='+item.id
		})
}
const modalshouhuo=ref(false)
const shouhuoBtn=(item)=>{
	modalshouhuo.value.open()
}
const confirmShouHuo=()=>{
	editOrder({"id":orderinfo.value.id,"orderStatus":"4"}).then(res=>{
		if(res.code==200){
			uni.showToast({
				title:'确认收货成功'
			})
		}
	})
}
const deleteBtn=()=>{
	modal.value.open()
}
const confirm=()=> {
	setTimeout(() => {
		removeOrder([orderinfo.value.id]).then(res=>{
			modal.value.close();
		})
	}, 2000)
}
const modalcancel=ref()
const cancelBtn=()=>{
	modalcancel.value.open();
}
const confirmCancel=()=>{
	setTimeout(() => {
		closeOrder(orderinfo.value.id).then(res=>{
			modalcancel.value.close();
		})
	}, 2000)
}
const goToReceivingAddress=()=>{
  uni.navigateTo({
    url:'/pages/receivingaddress/index'
  })
}
const change=(e)=>{
		console.log('弹窗状态改变：',e);
}
const changeService=(goodsId,e)=>{
	if(commentList.value.length > 0){
		let has=false;
		commentList.value.forEach(item=>{
			if(item.orderId === orderId.value && item.goodsId === goodsId){
				item.serviceScore=e;
				has=true;
			}
		})
		if(!has){
			commentList.value.push({
				goodsId:goodsId,
				orderId:orderId.value,
				serviceScore:e,
			});
		}
	}else{
		commentList.value.push({
			goodsId:goodsId,
			orderId:orderId.value,
			serviceScore:e,
		});
	}
}
const changeDesc=(goodsId,e)=>{
	if(commentList.value.length > 0){
		let has=false;
		commentList.value.forEach(item=>{
			if(item.orderId === orderId.value && item.goodsId === goodsId){
				item.descScore=e;
				has=true;
			}
		})
		if(!has){
			commentList.value.push({
				goodsId:goodsId,
				orderId:orderId.value,
				descScore:e,
			});
		}
	}else{
		commentList.value.push({
			goodsId:goodsId,
			orderId:orderId.value,
			descScore:e,
		});
	}
}
const hasProperty = (array, property, value) => {
  return array.some(item => item[property] === value);
};
const commentForm=ref({
	orderId:null,
	commentContent:null,
	commentPictures:null,
	serviceScore:null,
	descScore:null
})
//评论列表
const commentList=ref([])
const changeInput=(e,goodsId)=>{
	if(commentList.value.length > 0){
		let has=false;
		commentList.value.forEach(item=>{
			if(item.orderId === orderId.value && item.goodsId === goodsId){
				item.commentContent=e;
				has=true;
			}
		})
		if(!has){
			commentList.value.push({
				goodsId:goodsId,
				orderId:orderId.value,
				commentContent:e,
			});
		}
	}else{
		commentList.value.push({
			goodsId:goodsId,
			orderId:orderId.value,
			commentContent:e,
		});
	}
}
const commentSubmit=()=>{
	if(commentList.value.length == 0){
		uni.showToast({
			title:'评论不能为空'
		})
		return
	}
	commentList.value.forEach(item=>{
		if(!item.commentContent){
			uni.showToast({
				title:'评论内容不能为空'
			})
			return
		}
		if(!item.serviceScore){
			uni.showToast({
				title:'服务评分不能为空'
			})
			return
		}
		if(!item.descScore){
			uni.showToast({
				title:'描述评分不能为空'
			})
			return
		}
		saveComment(item).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title:'评价成功'
				})
				popup.value.close()
			}
		})
	})
}


	const hidereceiveAddress=ref(false)
	const hideMiddleNumbers=(phoneNumber)=> {
		if (phoneNumber.length === 11) { // 假设手机号是11位
			return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
		}
		return phoneNumber; // 如果不是11位，直接返回原手机号
	}
	const hideName=(name)=>{
		if(name.length == 1){
			return name;
		}else{
			name=name.slice(0, -1)+'*';
			return name;
		}
	}
	const hideDetailAddress=(address)=>{
		if(address.length <= 4){
			return address;
		}
		return address.slice(0,-4)+'***'
	}
	const orderIdValue=ref()
	onLoad((options)=>{
		orderIdValue.value=options.id
		getOrderInfo(options.id)
	})
	onShow(()=>{
		if(orderIdValue.value){
			getOrderInfo(orderIdValue.value)
		}
	})
	const orderinfo=ref()
	const getOrderInfo=(id)=>{
		info(id).then(res=>{
			orderinfo.value=res.data;
			if(orderinfo.value.orderStatus==6){
				uni.setNavigationBarTitle({
					title:'交易关闭'
				})
				window.history.back()
			}
			if(orderinfo.value.carts){
				getOrderAddress(orderinfo.value.carts[0].receivingAddressId)
			}else{
				getOrderAddress(orderinfo.value.receivingAddressId)
			}
		})
	}
	const orderaddress=ref()
	const getOrderAddress=(id)=>{
		infoReceive(id).then(res=>{
			orderaddress.value=res.data
		})
	}
	const chatBtn=(id,shopId)=>{
		uni.navigateTo({
		  url:'/pages/message/detail?shopId='+shopId,
		})
	}
	const popup2=ref()
	const morenBtn=()=>{
		popup2.value.open('bottom');
	}
	const modal=ref(false)
	
	const operBtn=(item)=>{
		if(item.text==='删除订单'){
			modal.value.open()
		}else if(item.text==='查看物流'){
			uni.navigateTo({
				url:'/pages/order/logistics?id='+orderinfo.value.id
			})
		}
	}
	const menus=ref([
		{
			text:'删除订单'
		},
		{
			text:'查看物流'
		}
	])

	const popup=ref()
	const value=ref(2)
	const orders=ref([])
	const orderId=ref()
	const commentBtn=(val)=>{
		orderId.value=val.id
		if(val.carts){
			orders.value=val.carts;
		}else{
			orders.value.push(val);
		}
		commentList.value=[]
		fileList2.value=[]
		fileList.value=[]
		popup.value.open()
	}
	const fileList=ref([])
	const fileList2=ref([])
	const afterRead=async (e,goodsId)=>{
		let lists=[].concat(e.file)
		for (let i = 0; i < lists.length; i++) {
			await uploadFilePromise(lists[i].url,goodsId)
		}
	}
	const uploadFilePromise=(url,goodsId)=> {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl+'/app/common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (res) => {
					const urlimg=JSON.parse(res.data).data
					const url = baseUrl+urlimg;
					
					if(commentList.value.length > 0){
						let has=false;
						commentList.value.forEach(item=>{
							if(item.orderId === orderId.value && goodsId===item.goodsId){
								if(item.commentPictures){
									item.commentPictures=item.commentPictures.concat(","+urlimg)
								}else{
									item.commentPictures=urlimg
								}
								if(item.fileList){
									console.log("11")
									item.fileList.push({url:url})
								}else{
									item.fileList=[]
									item.fileList.push({url:url})
								}
								has=true;
							}
						})
						if(!has){
							console.log("222")
							let fileList=[]
							fileList.push({url:url})
							commentList.value.push({
								goodsId:goodsId,
								fileList:fileList,
								orderId:orderId.value,
								commentPictures:urlimg,
							});
						}
					}else{
						fileList.value.push({url:url})
						commentList.value.push({
							fileList:fileList.value,
							orderId:orderId.value,
							goodsId:goodsId,
							commentPictures:urlimg,
						});
					}
				}
			});
		})
	}
	const deletePic=(e,goodsId)=>{
		const url = e.file.url.substring(e.file.url.indexOf('/profile'))
		commentList.value.forEach(item=>{
			if(item.orderId === orderId.value && goodsId===item.goodsId){
				let pics=item.commentPictures.split(',')
				const index = pics.indexOf(url);
				if (index !== -1) {
					pics.splice(index, 1);
					item.commentPictures=pics.join(",")
				}
				item.fileList.forEach(it=>{
					const index = item.fileList.findIndex(it => it.url ===  e.file.url);
					if(index != -1){
						item.fileList.splice(index, 1);
					}					
				})
			}
		})
	}
	const chartBtn=(type,item)=>{
		if(type == 'cart'){
			save({"goodsId":item.goodsId,"quantity":item.quantity,"productSpecificationsIds":item.productSpecificationsIds,
					"totalPrice":item.totalPrice,"unitPrice":item.unitPrice});
		}else if(type == 'order'){
			save({"goodsId":item.goodsId,"quantity":item.placeOrderQuantity,"productSpecificationsIds":item.productSpecificationsIds,
					"totalPrice":item.placeOrderQuantity * item.placeOrderUnitPrice,"unitPrice":item.placeOrderUnitPrice});
		}else if(type == 'all'){
			if(item.carts){
				item.carts.forEach(cart=>{
					save({"goodsId":cart.goodsId,"quantity":cart.quantity,"productSpecificationsIds":cart.productSpecificationsIds,
							"totalPrice":cart.totalPrice,"unitPrice":cart.unitPrice});
				})
			}else{
				save({"goodsId":item.goodsId,"quantity":item.placeOrderQuantity,"productSpecificationsIds":item.productSpecificationsIds,
						"totalPrice":item.placeOrderQuantity * item.placeOrderUnitPrice,"unitPrice":item.placeOrderUnitPrice});
			}
		}
		
		uni.switchTab({
			 url:'/pages/chart/index'
		})
	}
	const goGoodDetail=(item)=>{
		if(item.carts){
			uni.navigateTo({
				url:"/pages/shop/index?id="+item.shopId
			})
		}else{
			uni.navigateTo({
				url:"/pages/goods/detail?id="+item.goodsId
			})
		}
	}
	const gotoLogisticsBtn=(id)=>{
		uni.navigateTo({
		  url:'/pages/order/logistics?id='+id,
		})
	}
	const phone=ref("13988888888")
	phone.value = phone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
	const goShop=(id)=>{
		uni.navigateTo({
			url:"/pages/shop/index?id="+id
		})
	}
	const gotoGoodInfo=(id)=>{
		uni.navigateTo({
		  url:'/pages/goods/detail?id='+id,
		})
	}
	
</script>

<style scoped>
	.price2{
		display: flex;
		flex-direction: column;
		text-align: right;
		width: 30%;
		padding-right: 6px;
	}
	.inputcomment{
		position: relative;
	}
	.xingxing{
		padding: 20px;
		background-color: #dedede;
	}
	.comment-icon{
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 14px;
		margin-bottom: 10px;
		color: gray;
	}
	
	.addresstop{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		white-space: nowrap;
		padding: 10px;
		border-bottom: 1px solid gainsboro;
	}
	.address-text{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.addresstop text{
		margin-right: 5px;
	}
	.bottom-detail{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		border: 1px solid lightgray;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: white;
	}
	.btn{
		width: 100%;
		text-align: right;
		padding-right: 15px;
		display: flex;
		align-items: center;
	}
	.intocontent{
		color: darkgray;
		text-align: right;
	}
	.infotitle{
		margin-top: 5px;
		display: flex;justify-content: space-between;padding: 5px;
	}
	.price2{
		display: flex;
		flex-direction: column;
		text-align: right;
		justify-content: space-between;
		height: 100%;
	}
	.goodname{
		color: black;
		font-weight: bold;
	}	
	.remark{
		display: flex;
		justify-content: space-between;
		color: coral;
	}
	.ordertail image{
		width: 90px;
		height: 90px;
	}	
	.order view{
		margin-bottom: 8px;
		margin-left: 5px;
	}
	.order{
		margin-top: 10px;
		overflow: auto;
		height: 80vh;
	}
	.order::-webkit-scrollbar{
		display: none;
	}
	.more{
		width:10%;
	}
	.btn2{
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.price{
		text-align: right;
		color: black;
	}
	.ordertail{
		display: flex;
		justify-content: space-evenly;
	}
	.shop{
		display: flex;justify-content: space-between;
		align-items: center;
	}
	.shopname{
		display: flex;align-items: center;justify-content: space-evenly;
		color: black;
	}
	.status{
		color: coral;
	}
</style>